<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.定义表单 练习form标签与vue对象形成数据绑定-->
			<form action="http://www.baidu.com">
				用户名: <input type="text" v-model="user.username" /><br>
				用户详情:<textarea type="text" v-model="user.info"></textarea><br>
				<!-- 定义下拉框 -->
				<select name="book" v-model="user.book">
					<option value="java编程思想">java编程思想</option>
					<option value="java疯狂讲义">java疯狂讲义</option>
					<option value="java技术卷">java技术卷</option>
				</select><br>
				<!-- 单选框练习 -->
				性别:
				<input type="radio" value="男" name="gender" v-model="user.gender" />男
				<input type="radio" value="女" name="gender" v-model="user.gender" />女
				<br>
				<!-- 多选框练习 -->
				爱好:
				<input type="checkbox" value="吃" name="hobby" v-model="user.hobby" />吃
				<input type="checkbox" value="喝" name="hobby" v-model="user.hobby" />喝

				<!-- 阻止标签的默认行为 采用其他方式提交 -->
				<input type="submit" value="提交" @click.prevent="addForm" />
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user: {
						username: ' ',
						info: ' ',
						book: 'java技术卷',
						gender: '男',
						hobby: ["吃"]
					}
				},
				methods: {
					addForm() {
						console.log("input标签:" + this.user.username)
						console.log("文本域标签:" + this.user.info)
					}
				}
			})
		</script>
	</body>
</html>
